<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>02_盒子模型-外边距-解决margin塌陷问题</title>
        <style>
            #outer {
                width: 400px;
                background-color: #999;

                /* （1）给父元素添加一个非0的内边距 
                   此解决方案不好 因为给父盒子凭空添加了1px的内边距 
                */
                /* padding: 1px; */

                /* （2）给父元素设置宽度不为 0 的边框。 
                    此解决方案依然不好 因为凭空多了一边框  
                */
                /* border: 1px solid black; */

                /* （3）overflow: hidden */
                overflow: hidden;
            }

            #d1 {
                width: 100px;
                height: 100px;
                background-color: red;

                margin-bottom: 200px;

                margin-top: 100px;
            }
            #d2 {
                width: 100px;
                height: 100px;
                background-color: green;
                margin-bottom: 100px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="d1"></div>
            <div id="d2"></div>
        </div>

        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque architecto soluta perferendis quia debitis laborum neque, sed quo dolores ducimus, atque voluptates doloribus ratione, qui perspiciatis necessitatibus quae porro eum sapiente? Recusandae ipsa blanditiis quaerat non cum soluta, qui veniam consectetur in. Voluptatum cum iusto optio minima. Tempore, provident reiciendis.</div>
    </body>
</html>